Lecture 4: File Paths & Boilerplate

1. File Paths

File paths tell the browser where to find resources such as images, stylesheets, or JavaScript files. They can be absolute (full location of a file) or relative (location relative to the current HTML file).

Absolute Path

An absolute path specifies the complete location of a file, including domain or drive.

<img src="https://example.com/images/pic.png" alt="Absolute Path Example">

Relative Path

A relative path specifies a file in relation to the current HTML file’s location.

<img src="./images/pic.png" alt="Relative Path Example">

Directory Navigation

./ → refers to the current folder
../ → moves one folder up

2. HTML Boilerplate

The HTML boilerplate is the basic structure of an HTML document that ensures browsers can correctly interpret and display your webpage. It provides the essential foundation for any HTML page.

Boilerplate Code Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Web Page</title>
</head>
<body>
  <h1>Hello World</h1>
  <p>This is my first webpage using boilerplate.</p>
</body>
</html>

Explanation of Each Part:

<!DOCTYPE html> → Tells the browser to use HTML5.
<html lang="en"> → Root element of the page, with language set to English.
<head> → Contains metadata (data about the webpage).
<meta charset="UTF-8"> → Ensures correct character encoding (supports all symbols/emojis).
<meta name="viewport"> → Makes the page responsive on mobile devices.
<title> → Sets the title in the browser tab.
<body> → Contains all visible content (text, images, links, etc.).